<!DOCTYPE html> 
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>车间列表</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <style>
    .status-red {  /* 红色，报警 */
        background-color: red;
        color: white;
    }

    .status-green {  /* 绿色，工作 */
        background-color: #00FF00;
        color: white;
    }

    .status-yellow {  /* 黄色，待机 */
        background-color: #EC971F;
        color: white;
    }

    .status-purple {  /* 紫色，正常 */
        background-color: #5329CE;
        color: white;   
    }

    .icon-operated {
        width: 35px;
        height: 35px;
    }

    .machine-name {
        font-size: 15px;
    }

    .light-cell {
        text-align: center;
        padding-top: 15px;
    }

    .light-img {
        width: 45px;
        height: 45px;
    }

    .icon {
        width: 30px;
        height: 30px;
    }
    </style>
</head>

<body>
    <!-- 这里是车间列表的模板 -->
    <script type="text/html" id="workshop-item">
        {{each list}}
        <li class="item-content item-link workshop-item" id="{{$value.id}}">
            <div class="item-inner">
                <div class="item-title">{{$value.name}}</div>
                <div class="item-after">
                    {{$value.machine_count + "台机床"}}
                    <img class="icon" id="{{$value.id}}" src="images/ic_light_green.png"></img>
                </div>
            </div>
        </li>
        <div class="row" id={{"machine-list-" + $value.id}} hidden="hidden"></div>
        {{/each}}
    </script>
    <!-- 这里是机床列表的模板 -->
    <script type="text/html" id="machine-item">
        {{each list}}
        <div class="col-50">
            <div class="card" id="{{$value.workshop_id + '-' + $value.id}}">
                <div class="card-content">
                    <div class="card-content-inner">
                        <div class="list-block">
                        <li class="item-content">
                            <div class="item-media"><img src="images/ic_operated_punch.png" class="icon-operated"></div>
                            <div class="item-inner">
                                <div class="item-title machine-name">{{$value.name}}</div>
                            </div>
                        </li>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{/each}}
    </script>
    <div class="content">
       <!--  <div class="row">
            <div class="col-25 light-cell"><img src="images/ic_light_green.png" class="light-img" /></div>
            <div class="col-25 light-cell"><img src="images/ic_light_red.png" class="light-img" /></div>
            <div class="col-25 light-cell"><img src="images/ic_light_yellow.png" class="light-img" /></div>
            <div class="col-25 light-cell"><img src="images/ic_light_purple.png" class="light-img" /></div>
        </div> -->
        <div class="content-block-title">车间列表</div>
        <div class="list-block">
            <ul id="workshop-list"></ul>
        </div>
    </div>
    <script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
    <script type="text/javascript" src="js/arttemplate.js?version=2016053101"></script>
    <script type="text/javascript" src="js/common.js?version=2016053101"></script>
    <script type="text/javascript" src="js/machine.js?version=2016053101"></script>
    <script type="text/javascript">
        //获取车间列表
        getWorkshops();
        getStatus();
    </script>
</body>

</html>
<!--

机床状态分为1）正常运行2）待机3）故障（报警，手机工厂宝会有报警提醒，并有记录）4）停机

1）正常运行绿色2）待机 黄色3）故障（报警，手机工厂宝会有报警提醒，并有记录）红色4）停机黑色
